iOS 7のブラー（磨りガラス風）について考えてみる

iOS 7のブラー効果をどう実現する？

コントロールセンターや音量調節の背景など、iOS 7でよく見かける磨りガラス風のあれです。ブラーをかけるとなんとなくiOS 7っぽくなるので、「コントロールセンターみたいにブラーかけてよ！」って言われることが増えそうですね。

「磨りガラス風の画像を上にかぶせりゃいいんじゃないの？」と誤解されている方も多いかもしれませんが、そういうわけにはいきません！それっぽく見せるにはプログラムでそこそこのコードを書いてあげなければなりません。

UIViewとかにブラーをかけるメソッドがあるといいのですが、今のところないです。したがって、自前で作成したビューにブラーをかけるには、その処理を自分で実装する必要があります。ようするに時間がかかります。

そこで、ブラーをかけるのにどういった実装方法があるのかを調べてみたところ、以下の２つの方法がみつかりました。

• 標準コントロールをうまいこと使う
• がんばってブラー処理した画像を生成する

実際に公開されているライブラリを参考に、実装方法をみてみましょう。

標準コントロールをうまいこと使う

１つ目は標準コントロールをうまいこと使う方法です。GitHubで公開されているJagCesar/iOS-blurでは、この方法を使用してうまいこと自前のビューにブラーをかけています。

使い方は、以下のようにブラーをかけたい領域を指定してサブビューとして追加するだけでOKです。

AMBlurView *blurView = [AMBlurView new];
[blurView setFrame:CGRectMake(0.0f,0.0f,100.0f,100.0f)];
[self.view addSubview:blurView];

ソースコードをダウンロードして、AMBlurView.mを開いてみましょう。以下、重要なところのみ抜き出しました。

AMBlurView.m

・・・

@interface AMBlurView ()

@property (nonatomic, strong) UIToolbar *toolbar;

@end

@implementation AMBlurView

・・・

- (void)setup {
    // If we don't clip to bounds the toolbar draws a thin shadow on top
    [self setClipsToBounds:NO];
    
    if (![self toolbar]) {
        [self setToolbar:[[UIToolbar alloc] initWithFrame:[self bounds]]];
        [self.layer insertSublayer:[self.toolbar layer] atIndex:0];
    }
}

・・・

@end

ご覧の通り、このライブラリでは標準コントロールであるUIToolbarを利用してブラー効果を実現しています。具体的には、UIViewのサブクラスであるAMBlurViewのレイヤーのサブレイヤーとして、UIToolbarのレイヤーを追加しているだけです。そして、- layoutSubviewsメソッド内で適宜表示サイズを変えています。

この実装方法では、以下のメリット・デメリットがあります。

• メリット
  • 背景が動く場合でもリアルタイムでブラー処理をかけることができる
• デメリット
  • iOS 6以前で動かない
  • 本来の用途でツールバーを使用していないので気持ち悪い

がんばってブラー処理した画像を生成する

2つ目は元画像からがんばってブラー処理した画像を生成するという、ある意味正攻法的な実装方法です。この方法は2013 WWDC DeveloperのImplementing Engaging UI on iOSで紹介されている方法です（WWDC 2013 Session Videos - Apple Developer）。

ソースコードはGitHubのAdrian2112/UIImage-BlurredFrameで公開されています。早速ソースコードをダウンロードしてみましょう。

使い方は、以下のように元画像からブラーをかけたい範囲を指定して画像を生成します。

UIImage *img = [UIImage imageNamed:@"myImage"];
CGRect frame = CGRectMake(0, img.size.height - 200, img.size.width, img.size.height - 200);
img = [img applyLightEffectAtFrame:frame];

標準コントロールをうまいこと使うと違うところは、ブラーをかける対象が画像であることです。ようするにブラーをかけたい範囲が画像でない場合、明示的に画像化してやる必要があります。
メリット・デメリットは以下の通りです。

• メリット
  • iOS 6以前でも動く
• デメリット
  • 背景が動く場合リアルタイムでブラー処理をかけることができない
  • ブラーをかける対象が画像でなければならない（画像でなければ画像化しなければならない）

余談ですが、UIImage-BlurredFrameはCocoaPodsからも利用できます。

Podfile

pod 'UIImage+BlurredFrame'

比較してみる

ここからは「標準コントロールをうまいこと使う」と「がんばってブラー処理した画像を生成する」の２つの方法を使ってみてわかったメリット・デメリットから考察してみたいと思います。

iOSのバージョン

標準コントロールをうまいこと使うはあくまで「iOS 7より背景をブラー処理するようになった標準コントロールを使用する」ので、iOS 6以前では使用できません。
対してがんばってブラー処理した画像を生成するは自前でブラー処理した画像を生成するので、iOSのバージョンに関係ありません。
なので、iOS 6以前でもブラー効果を使いたい場合はがんばってブラー処理した画像を生成するを選択する他ありません。

背景が動く場合

背景が動く場合は標準コントロールをうまいこと使うが有効で、特別な実装はとくに必要ありません。
しかし、がんばってブラー処理した画像を生成するの場合、背景の動きに合わせてブラーをかける範囲を計算して、都度画像を生成する必要があるため、複雑な実装が必要になります。

まとめ

要するに何が言いたいかといいますと、iOS 7でよく見かけるからと言ってブラーをかけるのはそんなに簡単じゃありませんよーってことです。
上の比較だけ見ると、あちら立てればこちら立たずな感じですね。これらの問題を解決してくれる便利なライブラリはあるのでしょうか？
というわけで、次回はそんな便利なライブラリであるFXBlurViewを紹介できたらいいなーと思ってます！

参考

• JagCesar/iOS-blur
• Adrian2112/UIImage-BlurredFrame